<template>
  <div class="allback" style="width: 100%;height: 100%">
    <div class="background" style="height: 80%;width: 80%;">
      <div class="text">
        <h1>欢迎使用Capgemini项目管理系统</h1>
      </div>
      <div class="text">
        <h1>本系统采用Vue3+ElementPlus+Pinia+TS完成前端构造</h1>
      </div>
      <div style="display: flex">
        <div id="main" style="width: 50%;height:400px;flex:1"></div>
        <div style="width: 50%;height:400px;flex:1">
          <div class="clock" style="margin: 40px auto auto;">
            <div class="hours">
              <div id="hour" class="hour"></div>
            </div>
            <div class="minutes">
              <div id="minute" class="minute"></div>
            </div>
            <div class="seconds">
              <div id="second" class="second"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts';
import {onBeforeUnmount, onMounted, ref} from "vue";
import {selectPersonApi} from "@/api/PersonSelect";

onMounted(function start() {
  const deg = 6;
  const hr = document.querySelector('#hour');
  const mn = document.querySelector('#minute');
  const sc = document.querySelector('#second');

  setInterval(() => {
    let day = new Date();
    let hh = day.getHours() * 30; //当前Hour
    let mm = day.getMinutes() * deg; //当前Minute
    let ss = day.getSeconds() * deg; //当前Second
    hr['style'].transform = `rotateZ(${(hh) + (mm / 12)}deg)`;
    mn['style'].transform = `rotateZ(${mm}deg)`;
    sc['style'].transform = `rotateZ(${ss}deg)`;
  });
})


// 指定图表的配置项和数据
const option = ref({
  series: [
    {
      type: 'pie',
      data: [],
      roseType: 'area'
    }]
})
const tableData = []
const countPieValue = () => {
  const moth = []
  let flag = 0
  const list = tableData
  let wdy = {
    title: '',
    sur_name: []
  }
  for (let i = 0; i < list.length; i++) {
    let az = 0
    for (let j = 0; j < moth.length; j++) {
      if (moth[j].title == list[i]['name']) {
        flag = 1
        az = j
        break
      }
    }
    if (flag == 1) {
      const ab = moth[az]
      ab.sur_name.push(list[i])
      flag = 0
    } else if (flag == 0) {
      wdy = {
        title: '',
        sur_name: []
      }
      wdy.title = list[i]['name']
      wdy.sur_name = []
      wdy.sur_name.push(list[i])
      moth.push(wdy)
    }
  }
  for (let i = 0; i < moth.length; i++) {
    option.value.series[0].data.push({
      value: moth[i].sur_name.length,
      name: moth[i].title + "-" + moth[i].sur_name.length + "人"
    })
  }
}
// 模糊查询选择器
const select = () => {
  selectPersonApi('', '', '', '', '', '', '', '')
      .then(response => {
        for (let i = 0; i < response["data"].length; i++) {
          tableData.push({
            value: 1,
            name: response["data"][i].positionName
          })
        }
        countPieValue()
        setTimeout(() => {
          let myChart = echarts.init(document.getElementById('main'));
          myChart.setOption(option.value);
        }, 300)
      })
}
select()
onBeforeUnmount(() => {
  let myChart = echarts.init(document.getElementById('main'));
  myChart.dispose();
});
</script>

<style scoped>
.allback ::before {
  background: url("https://tva4.sinaimg.cn/large/9bd9b167gy1fwsgohsf4hj21hc0u0hdt.jpg") 50% / cover no-repeat fixed;
}

.background {
  width: 380px;
  position: absolute;
  padding: 10px;
  border-radius: 20px;
  overflow: hidden;
  z-index: 2;
}

.background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 20px;
  z-index: -1;
  filter: blur(5px);
}

.text {
  text-align: center;
  margin: 100px auto 0 auto;
  font-size: 40px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clock {
  display: flex;
  width: 350px;
  height: 350px;
  justify-content: center;
  align-items: center;
  background-image: url("http://101.35.94.229:888/images/svg/clock-number.png");
  background-size: cover;
  border: 4px solid #191919;
  border-radius: 50%;
  box-shadow: -4px -4px 10px rgba(67, 67, 67, .5),
  inset 4px 4px 10px rgba(0, 0, 0, .5),
  inset -4px -4px 10px rgba(67, 67, 67, .3);
}

.clock::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: rgb(245, 245, 0);
  border-radius: 50%;
  z-index: 999;
}

h1 {
  color: white;
  text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red;
  /*设置发光效果*/
}

.clock .hours,
.clock .minutes,
.clock .seconds {
  position: absolute;
}

.clock .hours, .hour {
  width: 160px;
  height: 160px;
}

.clock .minutes, .minute {
  width: 190px;
  height: 190px;
}

.clock .seconds, .second {
  width: 230px;
  height: 230px;
}

.hour, .minute, .second {
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
}

.hour::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 80px;
  background: #ff0080;
  border-radius: 6px 6px 0 0;
  z-index: 9;
}

.minute::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 90px;
  background: #6ec5ff;
  border-radius: 6px 6px 0 0;
  z-index: 10;
}

.second::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 150px;
  background: #fa0000;
  border-radius: 6px 6px 0 0;
  z-index: 11;
}
</style>
